<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <title>monitor</title>
    <meta charset="utf-8">
    <jsp:include page="/include.jsp"/>
    <script type="text/javascript">
        var isRed = false;
        var loadMapFlag = false;
        var task = null;
        var _unhealthyInterval = null;
        var _fences = {};
        var regions = ${regions};
        var _unhealthy = {};
        var heart = {
            max: ${config.max},
            min: ${config.min}
        };
        var strImgsvrUrl, strMapsvrUrl;
        var _strImgsvrUrl = "${pageContext.request.contextPath}/smap/gallery/";
        var _strMapsvrUrl = "${pageContext.request.contextPath}/smap/gallery/";
        var mapToorImage = "${pageContext.request.contextPath}/mmap/images/map3.png";
    </script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/mapi.css" type="text/css">
    <script src="${pageContext.request.contextPath}/mmap/mapi1.0.js"></script>
    <script type="text/javascript">
        var basePath = '${pageContext.request.contextPath}';
    </script>
    <style type="text/css">
        .search_panel p {
            margin-bottom: 5px;
        }
        em{
            font-weight: bold;
        }

        fieldset{
            border: 1px solid #888573;margin: 2px;padding: 5px;
        }
        .unknow{

        }
        .healthy{
            color: green;
        }
        .unhealthy{
            color: red;
        }
        .unknow i{
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 4px;
            vertical-align: bottom;
            background: url(${pageContext.request.contextPath}/images/icons/bt_action_icons.svg) 0 0 no-repeat;
        }
        .healthy i{
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 4px;
            vertical-align: bottom;
            background: url(${pageContext.request.contextPath}/images/icons/bt_action_icons.svg) 0 -90px no-repeat;
        }
        .unhealthy i{
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 4px;
            vertical-align: bottom;
            background: url(${pageContext.request.contextPath}/images/icons/bt_action_icons.svg) 0 -90px no-repeat;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'north', split:true" style="width:200px;height:69px" class="search_panel">
    <div class="easyui-panel" data-options="title:'地图监控'" style="padding: 5px;">
     <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            <tr>
                <td style="width:1%;text-align:left;" nowrap="nowrap">
                    <label for="datasource_datsourcename">甲板：</label>
                    <input type="text" id="select_deckinfo" name="deckId" value="${deckId}"
                   class="easyui-combobox" data-options="required:true,missingMessage:'请选择甲板'"/>
                </td>
                <td style="width:1%;text-align:left;" nowrap="nowrap">
                    <label for="datasource_datsourcename">  地图：</label>
                    <input type="text" id="select_smap" name="deckId" value="${deckId}"
                   class="easyui-combobox" data-options="required:true,missingMessage:'请选择地图'"/>
                </td>
                <td style="width:1%;text-align:left;" nowrap="nowrap">
                     <a id="mapSearchButton" href="javascript:;" class="easyui-linkbutton" style="width:80px">开始监控</a>
                </td>
                <%-- 
                <td style="width:1%;text-align:left;" nowrap="nowrap">
                    <label for="datasource_datsourcename">人员名称：</label>
                    <input type="text" id="employee_name" name="employee_name" value="${employee_name}"/>
                </td>
                <td style="width:1%;text-align:left;" nowrap="nowrap">
                    <a id="employeeSearchButton" href="javascript:;" class="easyui-linkbutton"
               data-options="iconCls:'icon-search'" style="width:80px">查询</a>
                </td>
                --%>
            </tr>
            
            
        </table>
      
    </div>
   
  <%--   <div class="easyui-panel" data-options="title:'AP查询'" style="padding: 5px;">
        <p>
            AP名称或代码：
        </p>

        <p>
            <input type="text" id="ap_name" name="ap_name" value="${ap_name}"/>
        </p>

        <p>
            <a id="apSearchButton" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
               style="width:80px">查询</a>
        </p>
    </div>
    <div class="easyui-panel" data-options="title:'设备查询'" style="padding: 5px;">
        <p>
            设备mac：
        </p>

        <p>
            <input type="text" id="device_name" name="device_name" value="${device_name}"/>
        </p>

        <p>
            <a id="deviceSearchButton" href="javascript:;" class="easyui-linkbutton"
               data-options="iconCls:'icon-search'" style="width:80px">查询</a>
        </p>
    </div>
    --%>
</div>
<div id="center_panel" data-options="region:'center',title:'请在左侧选中查询条件'" style="padding:5px;background:#eee;">
    <div style="margin: 0 auto;text-align:center;">
        <div id="message">
            <p>1. 请在左侧选中需要监控的项目</p>

            <p> 2. 每种监控不能同时使用</p>
        </div>
     
        <div id="smap" style="margin: 0 auto;text-align:center;"></div>
    </div>
</div>
<div data-options="region:'south',title:'人员状况',split:true,hideCollapsedContent:false,collapsed:false" title="人员状况"
     style="height:150px;width:400%;background:#eee;">
     <%-- <lable style="color:red;display:none;" ><input type="checkbox" checked="checked" value="1" id="auto" name="auto">5秒自动刷新数据</lable>
         <input type="button" value="监控设置" id="config">--%>
   <table id="datagrid" ></table>
</div>

<div style="display:none;">
    <div id="map_dialog">
        <table id="map_datagrid"></table>
    </div>
    <div id="employee_dialog">
        <table id="employee_datagrid"></table>
    </div>
    <div id="ap_dialog">
        <table id="ap_datagrid"></table>
    </div>
    <div id="device_dialog">
        <table id="device_datagrid"></table>
    </div>
    <div id="config_dialog">
        <form id="configForm" name="configFrom" method="get">
            <table style="width: 100%;" class="listtable">
                <tr class="row-even">
                    <td class="tr_left" style="width: 150px;"><span class="required">*</span>报警最小心率:&nbsp;</td>
                    <td class="tr_right">
                        <input type="text" id="min" name="min" value="${config.min}" maxlength="3"  class="easyui-numberbox" data-options="required:true,missingMessage:'请输入报警最小心率'"/>
                    </td>
                </tr>
                <tr>
                    <td class="tr_left"><span class="required">*</span>报警最大心率:&nbsp;</td>
                    <td class="tr_right">
                        <input type="text" id="max" name="max" value="${config.max}" maxlength="3"  class="easyui-numberbox" data-options="required:true,missingMessage:'请输入报警最大心率'"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<script type="text/javascript">
$(function () {
    $('#select_smap').combobox({
        valueField: 'id',
        textField: 'name'
    });
   

    $('#config').click(function(){
        $('#config_dialog').dialog({
            top: 50,
            width: 380,
            height: 200,
            modal: true,
            title: '监控设置',
            buttons: [
                {
                    text: '保存',
                    iconCls: '',
                    id: 'fileUploadDialog',
                    handler: function () {
                        $('#configForm').form('submit', {
                            url: '${pageContext.request.contextPath}/smapInfoAction!setMonitorConfig.action',
                            onSubmit: function () {
                                if ($(this).form("validate")) {
                                    $.messager.progress({title: '提示', text: '正在保存，请稍候 ....'});
                                } else {
                                    return false;
                                }
                            },
                            success: function (result) {
                                try {
                                    var r = $.parseJSON(result);
                                    if (r.returnFlag) {
                                        heart.min = $('#min').val();
                                        heart.max = $('#max').val();
                                        $('#config_dialog').dialog('close');
                                    }
                                    $.messager.show({
                                        title: '提示',
                                        msg: r.returnMsg
                                    });
                                } catch (e) {
                                }
                                $.messager.progress('close');
                            }
                        });

                    }
                }
            ]
        }).dialog('open');
    });

    $('input[name="auto"]').change(function(){
        if($('input[name="auto"]:checked').length <= 0){
            window.clearInterval(task);
            task = null;
        }
    });

    $('#select_deckinfo').combobox({
        url: '${pageContext.request.contextPath}/deckInfoAction!getDeckInfoSelectData.action',
        valueField: 'id',
        textField: 'name',
        editable: false,
        onChange: function (newValue, oldValue) {
            $('#select_smap').combobox('clear');
            $('#select_smap').combobox('loadData', []);
            if (newValue != null && newValue != '') {
                $('#select_smap').combobox('reload', '${pageContext.request.contextPath}/smapInfoAction!getMapInfoSelectData.action?deckId=' + newValue);
            }
        }
    });

    $('#mapSearchButton').click(function () {
        var id = $('#select_smap').combobox("getValue");
        var name = $('#select_smap').combobox("getText");
        if (id != null && id != '') {
            loadMapFromMap(id, name);
        } else {
            $.messager.show({
                title: '提示',
                msg: "请选择地图"
            });
        }
    });
    $('#apSearchButton').click(function () {
        $('#ap_dialog').dialog({
            top: 50,
            width: 500,
            height: 400,
            modal: true,
            title: 'ap或代码查询结果',
            onClose: function () {
                $('#ap_datagrid').datagrid('reload');
            }
        }).dialog('open');

        loadApData();
    });
    $('#employeeSearchButton').click(function () {
        $('#employee_dialog').dialog({
            top: 50,
            width: 700,
            height: 400,
            modal: true,
            title: '人员查询结果',
            onClose: function () {
                $('#employee_datagrid').datagrid('reload');
            }
        }).dialog('open');

        loadEmployeeData();
    });
    $('#deviceSearchButton').click(function () {
        $('#device_dialog').dialog({
            top: 50,
            width: 500,
            height: 400,
            modal: true,
            title: '设备查询结果',
            onClose: function () {
                $('#device_datagrid').datagrid('reload');
            }
        }).dialog('open');
        loadDeviceData();
    });

   // window.onresize = function () {
    //  var width = $(window).width() - $('#smap').offset().left;
   // var height = $(window).height() - $('#smap').offset().top;
   // maplet.resize(width - 20 - 240, height - 20);
   // };
});


function loadMapFromMap(id, name) {
    $.messager.progress({
        title:'Please waiting',
        msg:'Loading data...'
    });
    try{
        changeStatus("正在使用地图监控, 所在地图：" + name);
        var loadMapAndFences2 = loadMapAndFences(id, '');
        if(loadMapAndFences2){
          //  loadPoints(id, '', '','');
        }
        $.messager.progress('close');
    } catch (e){
        $.messager.progress('close');
    }

    setInterval(function(){
    
            loadPoints(id, '', '','')
        }, 5000);
   
}

function loadMapFromAp(id, code, apName, smapId) {
    $.messager.progress({
        title:'Please waiting',
        msg:'Loading data...'
    });
    try{
        changeStatus("正在使用地图监控, 监控ap：" + apName);
        var loadMapAndFences2 = loadMapAndFences(smapId, id);
        if(loadMapAndFences2){
            loadPoints('', id, '','');
        }

        $('#ap_dialog').dialog('close');
        $.messager.progress('close');
    } catch (e){
        $.messager.progress('close');
    }

    if(task == null && $('input[name="auto"]:checked').length > 0){
        task = setInterval(function(){
            loadPoints('', id, '','')
        }, 5000);
    }

}
function loadMapFromEmployee(id, name) {
    $.messager.progress({
        title:'Please waiting',
        msg:'Loading data...'
    });
    try{
        changeStatus("正在使用地图监控, 监控人员：" + name);
        loadPoints('', '', id,'');
        $('#employee_dialog').dialog('close');
        $.messager.progress('close');
    } catch (e){
        $.messager.progress('close');
    }


    if(task == null && $('input[name="auto"]:checked').length > 0){
        task = setInterval(function(){
            loadPoints('', '', id,'')
        }, 5000);
    }
}
function loadMapFromDevice(id, deviceNo) {
    $.messager.progress({
        title:'Please waiting',
        msg:'Loading data...'
    });
    try{
        changeStatus("正在使用地图监控, 监控mac：" + deviceNo);
        loadPoints('', '', '', id + "__" + deviceNo);
        $('#device_dialog').dialog('close');
        $.messager.progress('close');
    } catch (e){
        $.messager.progress('close');
    }

    if(task == null && $('input[name="auto"]:checked').length > 0){
        task = setInterval(function(){
            loadPoints('', '', '', id + "__" + deviceNo);
        }, 5000);
    }
}


function loadTable(){

 $('#datagrid').datagrid({
       
        
        border: false,
        fitColumns: true,
        pagination: true,
        pageList: [30],
        rownumbers: false,
        sortName: 'id',
        pagePosition:'bottom',
        sortOrder: 'desc',
        striped: true,
         rowStyler:function(index,row){
		//	alert(row.heart_val+"----");
			
			//alert(row.region_id+"---"+row.f_region_id);
			if (row.region_id !=row.f_region_id){
				return 'background-color:yellow;color:blue;font-weight:bold;';
			}
			var heart= row.heart_val;
			if(heart==undefined){
			
			}
			
			if (row.heart_val !=null || row.heart_val !=undefined || row.heart_val < 30||row.heart_val > 150){
				return 'background-color:red;color:blue;font-weight:bold;';
			}
		},
        columns: [
            [
				{field: 'id', checkbox: true},
				{field: 'f_region_id', hidden: true},
				{field: 'region_id', hidden: true},
                {field: 'emp_name', title: '姓名', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
              //  {field: 'heart_val', title: '心率', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
                {field: 'name', title: '所在区域', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
                {field: 'device_mac', title: '设备mac', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
              //  {field: 'elec', title: '设备电量', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
                {field: 'create_time', title: '上报时间', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}}
                
            ]
        ]
    });
    

}


function loadPoints(smapId, fenceId, empId, devId) {
//alert("!!");
    $.ajax({
        type: "get",
        dataType: "json",
        cache:false,
        url: '${pageContext.request.contextPath}/cnbdw/smapInfoAction!loadPoints.action',
        data: {
            smapId: smapId || '',
            fenceId: fenceId || '',
            empId: empId || '',
            devId: devId || ''
        },
        beforeSend: function (XMLHttpRequest) {
            this; // 调用本次AJAX请求时传递的options参数
        },
        success: function (points) {
        
        loadTable();
        $('#datagrid').datagrid('loadData', points);
        
        
        
        
        
            var _fence_points = {};
          
            
             
            if (points && points.length > 0) {
               
                $.each(points, function (index, point) {
                    if(!loadMapFlag && point.smap_id != null && point.smap_id != ''){
                       loadMap(point.smap_id, '');
                       loadMapFlag =true;
                    }

                    if((smapId == null || smapId == "") && $.trim(point.geo_text) == ''){
                        $.messager.show({
                            title: '提示',
                            msg: "未找到报警区域"
                        });
                        return true;
                    }
                     var geoText = point.geo_text;
                    if (geoText && _fences[point.fid] == null) {
                        var fence = {geoText: geoText, code: point.code, name: point.name};
                        _fences[point.fid] = fence;
                    }
                    var _class;
                    if (point.heart_val && point.heart_val >= 30 && point.heart_val <= 150) {
                        _class = "healthy";
                    } else if(point.heart_val && (point.heart_val < 30 || point.heart_val > 150)){
                        _fences[point.fid].healthy = false; //不健康
                        _class = "unhealthy";
                    } else{
                        _class = "unknow";
                    }

                    countPlus(_fence_points, point);//计算人数

                    var empRegionWeight;
                    var fenceRegionWeight;
                    if(point.f_region_id != null && point.region_id != null){
                        empRegionWeight = getRegionWeight(point.region_id);
                        //alert(point.region_id+"ren");
                       // alert(point.f_region_id+"dt");
                      // alert(empRegionWeight+"!!");
                        fenceRegionWeight = getRegionWeight(point.f_region_id);
                      //  alert(fenceRegionWeight+"!!!!");
                      
                      if(empRegionWeight!=fenceRegionWeight){
                      _fences[point.fid].healthy = false;
                      }
                    }
                    
                   
                })
               
                renderPolylineCenterMarker(_fence_points);
                
            }else{
                
               maplet.clearOverlays();
                
            
            }
        },
        error: function () {
            //alert("出错");

        }
    });
}

function renderPolylineCenterMarker(_fence_points){
    maplet.clearOverlays();

    
    _unhealthy = {};
    $.each(_fences, function(key, fence){
        try{
            var points = [];
            var geoText = fence.geoText;
            if (geoText) {
                var points = [];
                var pids = geoText.split(';');
                $.each(pids, function (pindex, pid) {
                    var mPoint = new MPoint(pid);
                    points.push(mPoint);
                });

                var clazz = "";
                var icon = '${pageContext.request.contextPath}/resources/images/icon06.png';
                
                
                
                var count = _fence_points[key] || " ";
                if(count!=" "){
                var mpolyline = drawarea(points, fence);
                var centerPt = mpolyline.getCenterPt();
                if(typeof(fence.healthy) != "undefined" && !fence.healthy){
                
                
                    icon = '${pageContext.request.contextPath}/resources/images/icon09.png';
                    clazz = "single_red";
                    _unhealthy[fence.id] = mpolyline;
                }
                renderMMarker(centerPt, icon, clazz, count);
                }
            }

           
        } catch(e){
            console.info(e);
        }
    })

    changeFenceStatus();
   
}


function loadFences(smapId, fenceId) {
    return $.ajax({
        type: "get",
        async:false,
        dataType: "json",
        url: '${pageContext.request.contextPath}/cnbdw/smapInfoAction!loadFences.action',
        data: {
            smapId: smapId,
            fenceId: fenceId || ''
        },
        beforeSend: function (XMLHttpRequest) {
            this; // 调用本次AJAX请求时传递的options参数
        },
        success: function (fences) {
            if (fences) {
                $.each(fences, function (index, fence) {
                    _fences[fence.id] = fence;
                })
            }
            return true;
        },
        error: function () {
            alert("出错");
            return false;
        }
    });
}

function countPlus(_fence_points, point){
   if(_fence_points[point.fid] == null){
       _fence_points[point.fid] = 1;
   }else{
       _fence_points[point.fid] = _fence_points[point.fid] + 1;
   }
}

function changeStatus(title) {
    loadMapFlag = false;
    _fences = {};
    $('#center_panel').panel('setTitle', title);
    $('#message').hide();
    $('#smap').show();
    window.clearInterval(task);
    task = null;
}

function loadMapAndFences(mapId, fenceId) {
    loadMap(mapId, fenceId)
    return loadFences(mapId, fenceId);
}

function loadMap(mapId, fenceId) {
    $('#smap').html('');
    maplet = null;
    loadMapFlag = true;
    strImgsvrUrl = _strImgsvrUrl + mapId + "/";
    strMapsvrUrl = _strMapsvrUrl + mapId + "/";

    maplet = new Maplet("smap");
    maplet.centerAndZoom(new MPoint(0, 0), 0);
    maplet.showOverview(false,false);
    maplet.clickToCenter=false;
   // maplet.addControl(new MStandardControl()); 
  //  maplet.disableDragging();
   maplet.markerDragAnimation=false;
  maplet.allowDrawingDragMap=false;
    document.getElementById('LayerScale').style.display = 'none';
   document.getElementById('ImgCopyright').style.display = 'none';
    $('span:contains("GS(2011)1617")').parent().hide();
   var width = $(window).width() - $('#smap').offset().left;
    var height = $(window).height() - $('#smap').offset().top;
    maplet.resize(600, 600);
}




function drawarea(points, fence,point) {
    var html = [
        "<div style='width:300px;height:100px;'>",
        "<table style='width: 200px;margin: 5px;'>",
        "<tr><td style='width: 50%;text-align: right;'>报警区域编码：</td><td>" + fence.code + "</td></tr>",
        "<tr><td style='width: 50%;text-align: right;'>报警区域名称：</td><td>" + fence.name + "</td></tr>",
        "</table>",
        "</div>"
    ];

    var brush = new MBrush("green");
    brush.arrow = false;
    brush.style = 0;
    brush.stroke = 1;
    brush.fill = true;
    brush.color = "blue";
    // brush.bgcolor =  "red";
    //alert(fence.healthy+"--------------");
    if(typeof(fence.healthy) != "undefined" && !fence.healthy){
        brush.bgcolor =  "red";
    }
    brush.bgtransparency = 35;
    var polyline = new MPolyline(
            points,
            brush,
            new MInfoWindow(fence.name, html.join(''))
    );
    maplet.addOverlay(polyline);
    return polyline;
}


function changeFenceStatus(){
    window.clearInterval(_unhealthyInterval);
    _unhealthyInterval = null;

    _unhealthyInterval = setInterval(function(){
        var brush = new MBrush("green");
        brush.arrow = false;
        brush.style = 0;
        brush.stroke = 1;
        brush.fill = true;
        brush.bgcolor =  "red";
        brush.color = "red";
        brush.bgtransparency = isRed ? 35 : 50;

        $.each(_unhealthy, function(key, polyline){
            try{
                polyline.setBrush(brush);
            } catch(e){
                console.info(e);
            }
        })

        isRed = !isRed;
    }, 500);
}

function getRegionWeight(id){
    if(id != null && id != '' && regions != null && regions.length > 0){
        for(var i = 0; i < regions.length; i++){
            var region = regions[i];
            if(region.id == id){
                return region.weight;
            }
        }
    }
    return null;
}

function renderMMarker(point, icon, clazz, name) {
    icon = icon || '${pageContext.request.contextPath}/resources/images/wifi-flat.png';
    clazz = clazz || 'single';
    name = name || '';
    //alert(name);
    marker = new MMarker(
            point,
            new MIcon(icon, 40, 40),
            null,
            new MLabel("<div class='" + clazz + "'><em>" + name + "</em></div>", {
                xoffset: 0,
                yoffset: 0,
                opacity: 100,
                enableStyle: false
            })
    );

    maplet.addOverlay(marker);
    return marker;
}



function loadApData() {
    $('#ap_datagrid').datagrid({
        url: '${pageContext.request.contextPath}/cnbdw/fenceInfoAction!getAllDatasourceList.action',
        fit: true,
        queryParams: {
            name: $('#ap_name').val()
        },
        border: false,
        fitColumns: true,
        pagination: true,
        pageList: [10, 20, 30],
        rownumbers: false,
        sortName: 'id',
        sortOrder: 'desc',
        striped: true,
        columns: [
            [
                {field: 'id', checkbox: true},
                {field: 'name', title: 'ap名称', align: 'left', width: 200, formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'code', title: 'ap编码', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'action', title: '操作', align: 'right',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:;" onclick="loadMapFromAp(\'' + row.id + '\',\'' + row.code + '\',\'' + row.name + '\', \'' + row.smapId + '\')">开始监控</a>';
                    }
                }
            ]
        ]
    });
}
function loadEmployeeData() {
    $('#employee_datagrid').datagrid({
        url: '${pageContext.request.contextPath}/cnbdw/employeeAction!getAllDatasourceList.action',
        fit: true,
        queryParams: {
            name: $('#employee_name').val()
        },
        border: false,
        fitColumns: true,
        pagination: true,
        pageList: [10, 20, 30],
        rownumbers: false,
        sortName: 'id',
        sortOrder: 'desc',
        striped: true,
        columns: [
            [
                {field: 'photo', title: '照片', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if ($.trim(value) != '') {
                        return '<img src="${pageContext.request.contextPath}' + value + '" style="width: 30px; height: 30px;">';
                    }
                    return '--';
                }},
                {field: 'name', title: '姓名', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                //{field: 'namePy', title: 'namePy', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
                {field: 'gender', title: '性别', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == 1) {
                        return '男'
                    } else {
                        return '女'
                    }
                    return value;
                }},
                {field: 'company', title: '公司', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'duties', title: '政务', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '1') {
                        return '长官'
                    } else {
                        return '士兵'
                    }
                    return value;
                }},
                {field: 'cardType', title: '证件类型', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == 1) {
                        return '身份证'
                    } else if (value == 2) {
                        return '军官证'
                    }
                    return value;
                }},
                {field: 'cardNo', title: '证件号码', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                
                {field: 'action', title: '操作', align: 'left',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:;" onclick="loadMapFromEmployee(\'' + row.id + '\',\'' + row.name + '\')">开始监控</a>';
                    }
                }
            ]
        ]
    });
}
function loadDeviceData() {
    $('#device_datagrid').datagrid({
        url: '${pageContext.request.contextPath}/cnbdw/deviceAction!getAllDatasourceList.action',
        fit: true,
        queryParams: {
            deviceNo: $('#device_name').val()
        },
        border: false,
        fitColumns: true,
        pagination: true,
        pageList: [10, 20, 30],
        rownumbers: false,
        sortName: 'id',
        sortOrder: 'desc',
        striped: true,
        columns: [
            [
                {field: 'id', checkbox: true},
                {field: 'hardwareNo', title: '硬件标识', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'deviceNo', title: '设备mac', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'deviceType', title: '设备类型', align: 'left',
                    formatter: function (value, row, index) {
                        var html = "----"
                        if (value == 1) {
                            html = "手表";
                        } else if (value == 2) {
                            html = "手环1";
                        } else if (value == 3) {
                            html = "手环2";
                        } else if (value == 4) {
                            html = "智能卡";
                        } else if (value == 5) {
                            html = "人员卡";
                        }
                        return html;
                    }
                },
                {field: 'action', title: '操作', align: 'right',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:;" style="cursor:pointer" onclick="loadMapFromDevice(\'' + row.id + '\',\'' + row.deviceNo + '\')">开始监控</a>';
                    }
                }
            ]
        ]
    });
}

</script>
</body>
</html>